@charset "utf-8";
#wrap{position: relative;}
#wrap>img{width: 100%;height:100%;}
#wrap .zhe{width: 100%;height: 100%;position: absolute;left: 0;top: 0;
	background: rgba(0,0,0,0.2);}
/*logo*/
#wrap .logo{width: 1.1rem;height: 0.52rem;position:absolute;left: 50%;
	transform:translateX(-50%);top: 0.96rem;font-size: 0.3rem;font-weight:normal;
	color: #fff;text-align: center;line-height: 0.52rem;border: 0.03rem solid #eee;}
#wrap .love{display:block;width: 3.86rem;height: 3.8rem;position: absolute;
	left: 50%;transform: translateX(-50%);top: 0.9rem;font-size: 2rem;
	color: rgba(204,204,204,0.5);text-align: center;line-height: 3.8rem;}
/*form*/
#wrap form{width: 2.58rem;height: 1.14rem;position: absolute;
	left: 50%;bottom: 1.27rem;transform: translateX(-50%);
	color: #fff;font-size: 0.4rem;}
#wrap form>label{display: block;width: 2.58rem;height: 0.7rem;text-align: center;
	line-height: 0.7rem;color: #fff;border: 0.01rem solid #eee;margin-bottom: 0.03rem;}
#wrap #txt{width: 2.06rem;height: 0.44rem;outline:none;float: left;padding-left: 0.1rem;
	font-size: 0.18rem;color: #fff;background: rgba(1,2,32,0.5);
	border: 0.01rem solid #eee;border-right: none;}
#wrap #login{width: 0.52rem;height: 0.44rem;outline:none;float: left;color: #fff;
	background: rgba(1,2,32,0.5);font-size: 0.18rem;border: 0.01rem solid #eee;
	border-left: none;}
	
/*3D旋转球体*/
.ball {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.92rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ball, .x, .y, .z {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
.x1, .x2, .y, .y1, .y2, .z, .z1, .z2 , .xInner , .yInner , .zInner {
  position: absolute;
}
.x1,.x2,.y1,.y2,.z1,.z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}
.x {
  position: relative;
  border: 1px solid #FF0099;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: mymove 10s linear infinite;
  -moz-animation: mymove 10s linear infinite;
  -ms-animation: mymove 10s linear infinite;
  animation: mymove 10s linear infinite;
}
.y {
  top: 0; left: 0;
  border: 2px solid #0099FF;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
.z {
  top: 0; left: 0;
  border: 1px solid #FFCC33;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
.x1 {
  top: 6.25%; left: 6.25%;
  border: 1px solid #FF0099;
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  transform: translateZ(50px);
}
.x2 {
  top: 6.25%; left: 6.25%;
  border: 1px solid #FF0099;
  -webkit-transform: rotateX(180deg) translateZ(50px);
  -moz-transform: rotateX(180deg) translateZ(50px);
  -ms-transform: rotateX(180deg) translateZ(50px);
  transform: rotateX(180deg) translateZ(50px);
}
.y1 {
  top: 6.25%; left: 6.25%;
  border: 1px solid #0099FF;
  -webkit-transform: rotateX(90deg) translateZ(50px);
  -moz-transform: rotateX(90deg) translateZ(50px);
  -ms-transform: rotateX(90deg) translateZ(50px);
  transform: rotateX(90deg) translateZ(50px);
}
.y2 {
  top: 6.25%; left: 6.25%;
  border: 1px solid #0099FF;
  -webkit-transform: rotateX(270deg) translateZ(50px);
  -moz-transform: rotateX(270deg) translateZ(50px);
  -ms-transform: rotateX(270deg) translateZ(50px);
  transform: rotateX(270deg) translateZ(50px);
}
.z1 {
  top: 6.25%; left: 6.25%;
  border: 1px solid #FFCC33;
  -webkit-transform: rotateY(90deg) translateZ(50px);
  -moz-transform: rotateY(90deg) translateZ(50px);
  -ms-transform: rotateY(90deg) translateZ(50px);
  transform: rotateY(90deg) translateZ(50px);
}
.z2 {
  top: 6.25%; left: 6.25%;
  border: 1px solid #FFCC33;
  -webkit-transform: rotateY(270deg) translateZ(50px);
  -moz-transform: rotateY(270deg) translateZ(50px);
  -ms-transform: rotateY(270deg) translateZ(50px);
  transform: rotateY(270deg) translateZ(50px);
}
.xInner {
  border: 1px solid #FF0099;
  width: 100%;
  top: 50%;
}
.yInner {
  height: 100%;
  left: 50%;
  border: 1px solid #0099FF;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
.zInner {
  height: 100%;
  left: 50%;
  border: 1px solid #FFCC33;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
 
@-webkit-keyframes mymove
{
  100% { -webkit-transform:  rotateX(360deg) rotateY(180deg) }
}
@-moz-keyframes mymove
{
  100% { -moz-transform:  rotateX(360deg) rotateY(360deg) }
}
@-ms-keyframes mymove
{
  100% { -ms-transform:  rotateX(360deg) rotateY(360deg) }
}
@keyframes mymove
{
  100% { transform:  rotateX(360deg) rotateY(360deg) }
}
